<template>
  <!-- 留下一个RouterView占位 -->
  <RouterView/>
  <h3>{{$store.state.username}}</h3>
  <button @click="btn">点击立刻修改</button>
  <button @click="btn2">点击延迟修改</button>
</template>
<script>
import { useStore } from 'vuex'
export default {
  setup () {
    // useStore 生成仓库实例store
    const store = useStore()
    console.log('数据', store.state.username)

    const btn = () => {
      store.commit('changeName', '啊舒')
    }

    const btn2 = () => {
      store.dispatch('changeNameSync', '啊富')
    }
    return { btn, btn2 }
  }
}
</script>
